import styled from 'styled-components'

export const BrowserWrapper = styled.div`
	position: fixed;
	z-index: 99;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #222;

	display: flex;
	flex-direction: column;

	.top {
		height: 86px;
		position: relative;

		.closeBtn {
			position: absolute;
			right: 10px;
			top: 10px;

			width: 60px;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
	}

	.slide {
		flex: 1;
		color: #fff;
		display: flex;
		justify-content: center;
		position: relative;

		.control {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80px;
				position: absolute;
				top: 0;
				bottom: 0;
				cursor: pointer;

				&.left {
					left: 0;
				}
				&.right {
					right: 0;
				}
			}
		}

		.picture {
			position: relative;
			height: 100%;
			overflow: hidden;
			width: 100%;
			max-width: 105vh;

			img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				height: 100%;
				user-select: none;
			}

			.pic-enter {
				transform: translateX(${props => (props.isNext ? '100%' : '-100%')});
				opacity: 0;
			}

			.pic-enter-active {
				transform: translateX(0);
				opacity: 1;
				transition: all 200ms ease;
			}

			.pic-exit {
				opacity: 1;
			}

			.pic-exit-active {
				opacity: 0;
				transition: all 200ms ease;
			}
		}
	}

	.preview {
		display: flex;
		justify-content: center;
		height: 100px;
		margin-top: 10px;

		.content {
			position: absolute;
			bottom: 10px;
			width: 105vh;
			color: #fff;

			.desc {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.count {
					span {
						margin-right: 10px;
					}
				}
				.toggle {
					cursor: pointer;
				}
			}

			.pic-list {
				overflow: hidden;
				margin-top: 5px;
				height: ${props => (props.isShowList ? '67px' : '0')};
				transition: height 200ms ease;

				.item {
					margin-right: 15px;
					cursor: pointer;

					img {
						height: 67px;
						opacity: 0.5;
					}

					&.active {
						img {
							opacity: 1;
						}
					}
				}
			}
		}
	}
`
